import React, {FC, useEffect, useRef, useState} from 'react';
import style from "./index.module.styl";
import "@/assets/iconfont/iconfont.css"
import {CSSTransition} from 'react-transition-group';
import {useSelector} from "../../redux/hooks";
import {getTrending, shuffle, Trending} from "../../redux/slices";
import {useDispatch} from "react-redux";

export const Header: FC = () => {
  const [focused, setFocused] = useState<boolean>(false);
  const [mouseIn, setMouseIn] = useState<boolean>(false);
  const shuffleRef = useRef<HTMLElement | null>(null);
  const trending = useSelector(state => state.trending);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getTrending());
  }, [dispatch]);
  const doShuffle = () => {
    // 换一换动画
    if (shuffleRef.current) {
      const rawAngle = +shuffleRef.current.style.transform.replace(/\D/ig, '') || 0;
      shuffleRef.current.style.transform = `rotate(${rawAngle + 360}deg)`;
    }
    dispatch(shuffle())
  }

  // 生成热搜列表
  const getListArea = (show: boolean, list: Trending[]): JSX.Element => {
    if (show) {
      return (
        <div className={style.searchInfo}
             onMouseEnter={() => setMouseIn(true)}
             onMouseLeave={() => setMouseIn(false)}
        >
          <h3 className={style.searchInfoTitle}>热门搜索
            <span className={style.searchInfoSwitch} onClick={doShuffle}>
              <i ref={shuffleRef} className={["iconfont", style.spin].join(' ')}>&#xe851;</i>换一批
            </span>
          </h3>
          <ul className={style.searchInfoList}>
            {list.map(item => {
              return (<li key={item.id} className={style.searchInfoItem}>{item.title}</li>)
            })}
          </ul>
        </div>
      )
    } else {
      return <></>;
    }
  }

  return (
    <div className={style.headerWrapper}>
      <a href="/#" className={style.logo}/>
      <div className={style.nav}>
        <div className={[style.navItem, style.left, style.active].join(" ")}>首页</div>
        <div className={[style.navItem, style.left,].join(" ")}>下载App</div>
        <div className={style.searchWrapper}>
          <CSSTransition in={focused} timeout={200} classNames={{
            enter: style.slideEnter,
            enterActive: style.slideEnterActive,
            enterDone: style.slideEnterActive,
            exit: style.slideExit,
            exitActive: style.slideExitActive,
            exitDone: style.slideExitActive
          }}>
            <input onFocus={() => setFocused(true)} type="text"
                   onBlur={() => setFocused(false)}
                   className={[style.search].join(" ")} placeholder={"搜索"}/>
          </CSSTransition>
          <i className={["iconfont", style.zoom, focused ? style.focused : ''].join(" ")}>&#xe614;</i>
          {/*生成列表*/}
          {getListArea(focused || mouseIn, trending.slice(0, 10))}
        </div>
        <div className={[style.navItem, style.right].join(" ")}>登录</div>
        <div className={[style.navItem, style.right].join(" ")}>Aa</div>
      </div>
    </div>
  );
};

// export default Header;
